<template>
	<view class="content">
		<view class="left">
			<scroll-view 
			style="height: 100%;" 
			scroll-y="true"
			:scroll-into-view="leftView">
				<view 
				:id="'left'+index" 
				@click="clickLeft(item)" 
				:class="['left-item',index==item?'active':'']" 
				v-for="item in 9" 
				:key="item"
				>{{item}}</view>
			</scroll-view>
		</view>
		<view class="right">
			<scroll-view 
			@scroll="mainScroll"
			style="height: 100%;" 
			scroll-y="true"
			:scroll-with-animation="true"
			:scroll-into-view="rightView">
				<view class="item-right" :id="'right'+index" v-for="(item,index) in list" :key="index">
					<text>标题{{index+1}}</text>
					<view>
						<view v-for="(v,i) in item" :key="i">
							内容{{i+1}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				index:1,
				list:[],
				leftView:'',
				rightView:'',
				scrollTopSize:'',
				scrollHeight:'',
				topArr:[],
			}
		},
		onLoad(){
			const arr = Array.from(Array(9))
			this.list = arr.map(item=>{
				return [1,2,3,4,5,6,7,8,9]
			})
		},
		mounted(){
			this.initScrollView().then(res=>{
				this.getElementTop()
			})
		},
		methods:{
			/* 初始化滚动区域 */
			initScrollView() {
				return new Promise((resolve, reject) => {
					let view = uni.createSelectorQuery().select('.content');
					view.boundingClientRect(res => {
						console.log(res);
						this.scrollTopSize = res.top;
						this.scrollHeight = res.height;	//根据实际情况来赋值
						this.$nextTick(() => {
							resolve();
						});
					}).exec();
				});
			},
			// 获取元素顶部信息
			getElementTop() {
				new Promise((resolve, reject) => {
					let view = uni.createSelectorQuery().selectAll('.item-right');
					view.boundingClientRect(data => {
						resolve(data);
					}).exec();
				}).then(res => {
					let topArr = res.map(item => {
						return item.top - this.scrollTopSize; /* 减去滚动容器距离顶部的距离 */
					});
					this.topArr = topArr;
					/* 获取最后一项的高度，设置填充高度。判断和填充时做了 +-20 的操作，是为了滚动时更好的定位 */
					let last = res[res.length - 1].height;
					if (last - 20 < this.scrollHeight) {
						this.fillHeight = this.scrollHeight - last + 20;
					}
				});
			},
			// 右侧滑动
			mainScroll(e) {
				let top = e.detail.scrollTop;
				let index = 0;
				/* 查找当前滚动距离 */
				for (let i = this.topArr.length - 1; i >= 0; i--) {
					/* 在部分安卓设备上，因手机逻辑分辨率与rpx单位计算不是整数，滚动距离与有误差，增加2px来完善该问题 */
					if (top >= this.topArr[i]) {
						index = i+1;
						break;
					}
					
				}
				if(e.detail.scrollTop>=this.topArr[this.topArr.length-1]){
					this.index=9
				}else{
					this.index = index < 0 ? 0 : index+1;
				}
			},
			clickLeft(index){
				this.index = index
				this.rightView = 'right'+(index-1)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		height: calc(100vh - 88rpx);
		display: flex;
		>view{
			height: 100%;
		}
		.left{
			width: 200rpx;
			// border-right: 1px solid #e3e3e3;
			background: #e3e3e3;
		}
	}
	.left-item{
		height: 80rpx;
		border-bottom: 1rpx solid #e3e3e3;
		text-align: center;
		line-height: 80rpx;
	}
	.active{
		background: #FFF;
		position: relative;
	}
	.active::before{
		display: block;
		content: '';
		width: 30rpx;
		height: 30rpx;
		background: red;
		position: absolute;
		top: -28rpx;
		z-index: 999;
		right: 0;
		background: radial-gradient(circle at 0% 0%, transparent 15px, #fff 0);
	}
	.active::after{
		display: block;
		content: '';
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		bottom: -28rpx;
		right: 0;
		background: radial-gradient(circle at 0% 100%, transparent 15px, #fff 0);
	}
	.right{
		flex: 1;
		padding: 0 10rpx;
		.item-right{
			text{
				font-weight: bold;
				color: gray;
				line-height: 70rpx;
			}
			view{
				background: orange;
				border-radius: 70rpx;
				view{
					height: 200rpx;
					line-height: 200rpx;
					text-align: center;
				}
			}
		}
	}
	
</style>